<template>
  <div id="report-page">
    <el-card>
      <!-- 上半部分 -->

      <div class="upper-section">
        <!-- 左侧饼图区域 -->
        <div class="left-chart-container">
          <div
            ref="chartDom"
            :style="{ width: '1200px', height: '400px' }"
          ></div>
        </div>

        <!-- 右侧折线图区域 -->
        <!-- <div class="right-chart-container">
        <div ref="lineChart2" :style="{ width: '100%', height: '400px' }"></div>
      </div> -->
      </div>
    </el-card>

    <!-- 下半部分表格区域 -->
    <el-card>
      <div class="lower-section">
        <el-table :data="monthsData" style="width: 100%" stripe>
          <el-table-column prop="target" label=""></el-table-column>
          <el-table-column prop="4月2日" label="4月2日"></el-table-column>
          <el-table-column prop="4月4日" label="4月4日"></el-table-column>
          <el-table-column prop="4月5日" label="4月5日"></el-table-column>
          <el-table-column prop="4月6日" label="4月6日"></el-table-column>
          <el-table-column prop="4月7日" label="4月7日"></el-table-column>
        </el-table>
        <!-- <el-table :data="monthsData" border>
            <el-table-column
                label="年"
                prop="months">
                </el-table-column>
                           
                    <el-table-column v-for="(item,index) in departments" :key="item" :label="item">
                        <template slot-scope="scope">
                            <span>{{scope.row.sales[index]}}</span>
                        </template>	
                    </el-table-column>

            </el-table> -->
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
import { ElTable, ElTableColumn } from "element-plus"; // 引入Element UI的Table组件

export default {
  components: { ElTable, ElTableColumn }, // 注册组件
  data() {
    return {
      months: ["4月2日", "4月4日", "4月5日", "4月6日", "4月7日"],
      targets: ["目标挂数", "实际挂数"],
      monthsData: [
        // 假设这是从服务器获取的真实数据
        {
          target: "实际挂数",
          "4月2日": 195,
          "4月4日": 0,
          "4月5日": 0,
          "4月6日": 247,
          "4月7日": 12,
        },
        {
          target: "目标挂数",
          "4月2日": 200,
          "4月4日": 200,
          "4月5日": 200,
          "4月6日": 200,
          "4月7日": 200,
        },
      ],
      // monthsData: [
      //   // 假设这是从服务器获取的真实数据
      //   { month: '1月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '2月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '3月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '4月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '5月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '6月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '7月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '8月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '9月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '10月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '11月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '12月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },

      // ],

      picture3Option: null,
    };
  },
  mounted() {
    this.initPicture3();
  },
  methods: {
    initPicture3() {
      let arr = [];
      console.log(this.monthsData);
      this.targets.forEach((target) => {
        let obj = {};
        let arrData = this.monthsData.map((item) => item[target]);
        obj["data"] = arrData;
        obj["name"] = target;
        obj["type"] = "bar";
        //obj["stack"] = "add";
        arr.push(obj);

        console.log("arrData", arrData);
      });

      const chartDom = echarts.init(this.$refs.chartDom);

      this.picture3Option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.months,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
            name: "达成率",
            color: "red",
            interval: 5,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],

        //series: arr,
        series: [
          {
            name: "目标挂数",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [192, 0, 0, 247, 12],
          },
          {
            name: "实际挂数",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [200, 200, 200, 200, 200],
          },
          {
            name: "达成率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: [
              97.5, 0, 0, 1.235, 0.06,
            ],
          },
        ],
      };

      chartDom.setOption(this.picture3Option);
    },
  },
};
</script>
  

  <style scoped>
.upper-section {
  display: flex;
  justify-content: space-between;
}

.left-chart-container,
.right-chart-container {
  width: 48%;
  margin-right: 2%;
}

.lower-section {
  margin-top: 20px;
}
</style>